<template>
  <view class="my-container">
    <!-- 用户未登录时，显示登录组件 -->
    <view v-if="!token" style="text-align: center;">更多功能敬请登录~</view>
    <!-- 用户登录后，显示用户信息组件 -->
    <view v-else>
      <view v-if="userInfo.type <= 10" style="text-align: center;">请先在“我的->申请成为配送员”先进行注册~</view>
      <view v-else>
        <view class="inv-h-w">
          <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="changeTab(0)">全部</view>
          <view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="changeTab(1)">线上</view>
          <view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="changeTab(2)">线下</view>
          <view :class="['inv-h',Inv==3?'inv-h-se':'']" @click="changeTab(3)">加急</view>
          <view :class="['inv-h',Inv==4?'inv-h-se':'']" @click="changeTab(4)">转接单</view>
          <view :class="['inv-h',Inv==5?'inv-h-se':'']" @click="changeTab(5)">进行中</view>
          <view :class="['inv-h',Inv==6?'inv-h-se':'']" @click="changeTab(6)">已完成</view>
        </view>
        <!-- 内容 -->
        <view class="swiper-content">
          <view v-if="tlist.length != 0">
            <view v-if="Inv==Inv" class="content style-default">
              <goods-order :list="tlist" :types="Inv" :showBt='showBt' class="item"></goods-order>
            </view>
          </view>
          <view v-else style="text-align: center;">暂无配送任务~</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'

  export default {
    computed: {
      // 2. 从 m_user 模块中导入需要的 token 字符串
      ...mapState('m_user', ['token', 'userInfo']),
    },
    data() {
      return {
        Inv: 0,
        list: [], //真正的列表数据
        tlist: [], //处理的页面展示数据
        isloading: false,
        flag: true,
        showBt: "runner",
      }
    },
    onReachBottom() {
      console.log("上拉")
    },
    onPullDownRefresh() {
      if (this.token.length > 10) {
        this.method_name();
      }
      uni.stopPullDownRefresh();
    },
    mounted() {
      // 从后台拿到的数据
      this.method_name();
    },
    methods: {
      // 传值
      async method_name() {
        if (this.userInfo.type <= 10) return;
        // if (this.isloading) {
        //   console.log("节流阀打开");
        //   return;
        // }
        // this.isloading = true;

        const {
          data: result
        } = await uni.$http.post('/api/READ/api/my/demand/ok/list/'+ this.userInfo.userId);
        // console.log(result)
        if (result.code != 200) return uni.$showMsg(result.msg)
        uni.$showMsg("刷新成功")
        console.log(result.data)

        var list = result.data;
        // list数组中为每一项添加双向绑定的属性---这个属性要在页面显示(onShow)添加
        list.forEach(el => el.isChecked = false);
        this.list = list;
        this.tlist = list; //真实数据赋值给页面数据
        // this.isloading = false;
      },
      changeTab(Inv) {
        var that = this;
        that.Inv = Inv;
        var arr = [];
        that.list.map(item => { //遍历真实数据，拿到所需要的数据放在页面数据tlist中，展示在页面上
          var arrNum = [];
          var num = item.runnerStatus;
          while (num) {
            arrNum.unshift(num % 10);
            num = parseInt(num / 10)
          }
          for (var i = 0; i < arrNum.length; ++i) {
            if (arrNum[i] == Inv) {
              arr.push(item);
            }
          }
        })
        that.tlist = arr;
        if (Inv == 0) { //获取全部数据
          that.tlist = that.list;
        }
        //滚动到顶部
        uni.pageScrollTo({
          duration: 0, //过渡时间必须为0，否则运行到手机会报错
          scrollTop: 0 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离（如res.top - data.top）
        })
      },
    }
  }
</script>

<style lang="scss">
  page,
  .my-container {
    height: 100%;
  }

  .inv-h-w {
    z-index: 999;
    background-color: #FFFFFF;
    height: 100upx;
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
  }

  .inv-h {
    font-size: 30upx;
    flex: 1;
    text-align: center;
    height: 100upx;
    line-height: 100upx;
  }

  .inv-h-se {
    color: #FF9014;
    font-weight: bold;
    border-bottom: 6rpx solid #FF9014;
  }

  .swiper-content {
    margin-top: 130rpx;

    .content {
      width: 670rpx;
      margin: 0 auto 60rpx;
    }
  }
</style>
